<template>
  <div class="dpImdex">
    <div class="title" v-if="this.$route.query.type==7.1">{{info?info.type_dictText:''}}</div>
    <template v-if="this.$route.query.type!=7.1">
        <div class="flexBtn" >
          <div class="item">
            <div class="wcenter">
              <div class="btnBox">
                <div class="btn">{{info4?info4.type_dictText:''}}</div>
              </div>
              <div class="centerBox">
                <div class="amate" v-if="info4&&info4.content">
                  <div v-html="info4.content"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flexBtn" >
          <div class="item">
            <div class="wcenter">
              <div class="btnBox">
                <div class="btn">{{info6?info6.type_dictText:''}}</div>
              </div>
              <div class="centerBox">
                <div class="amate" v-if="info6&&info6.content">
                  <div v-html="info6.content"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="wcenter">
              <div class="btnBox">
                <div class="btn">{{info7?info7.type_dictText:''}}</div>
              </div>
              <div class="centerBox">
                <div class="amate" v-if="info7&&info7.content">
                  <div v-html="info7.content"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flexBtn" >
          <div class="item">
            <div class="wcenter">
              <div class="btnBox">
                <div class="btn">{{info8?info8.type_dictText:''}}</div>
              </div>
              <div class="centerBox">
                <div class="amate" v-if="info8&&info8.content">
                  <div v-html="info8.content"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="wcenter">
              <div class="btnBox">
                <div class="btn">{{info11?info11.type_dictText:''}}</div>
              </div>
              <div class="centerBox">
                <div class="amate" v-if="info11&&info11.content">
                  <div v-html="info11.content"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </template>
    

    <!-- 集群政策 -->
    <template v-else>
      <div class="flexBtn">
        <div class="item">
          <div class="tablelist">
              <vue-seamless-scroll :class-option="defaultOption" :data="consultList" :auto-play="autoPlay">
                  <table style="width:80%;margin: 0 auto;height:100%">
                      <tbody>
                          <tr v-for="(list,index) in consultList" :key="index" >
                              <td :data-contents="list.title" :data-names="list.title"  @click.stop="showPop(list)" style="z-index:99">
                                  <div class="d-cell" style="color:#fff">
                                      <div class="leftContent">
                                        {{list.title}}
                                        <span>{{list.createTime?moment(list.createTime).format('YYYY-MM-DD'):''}}</span>
                                      </div>
                                      <!-- <div class="rightIcon">{{list.createTime?moment(list.createTime).format('YYYY-MM-DD'):''}}</div> -->
                                  </div>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </vue-seamless-scroll>
          </div>
        </div>
      </div>
      
    </template>
    <a-modal v-model="visible" @ok="visible=false" :footer="null" :title="selectPopInfo.title" :wrapClassName="'mypdfwrap'" :width="'933px'" style="overflow:auto">
      <div v-html="selectPopInfo.content"></div>
    </a-modal>
  </div>
</template>
<script>
import moment from 'moment'
import { mapActions, mapGetters, mapState } from 'vuex'
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      info:{},
      info4:{},
      info6:{},
      info7:{},
      info8:{},
      info11:{},

      select:1,
      content:'',
      url: {
        list: 'indust/indNews/list',
      },
      defaultOption: {
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          limitMoveNum:11,
          // singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
          singleHeight: 40,
      },
      config:{},
      consultList:[],
      autoPlay:false,
      visible:false,
      selectPopInfo:{}
    }
  },
  created() {
    if(this.$route.query.type==7.1){
      this.newList(this.$route.query.type)
    } else {
      this.getList(this.$route.query.type)
      this.getList(6)
      this.getList(7)
      this.getList(8)
      this.getList(11)
    }
  },
  beforeDestroy() {},
  methods: {
    moment,
    ...mapActions(['Logout']),
    getList(type){
      getAction(this.url.list,{pageSize:1,type:type}).then(res=>{
          if(res.success){
            this['info'+type] = (res.result.records)[0]
          }else{

          }
      })
    },

    newList(type) {
        this.autoPlay = false
        getAction(this.url.list,{pageSize:1000000,type:type}).then(res=>{
          if(res.success){
            this.info = (res.result.records)[0]
            this.consultList = res.result.records
            setTimeout(() => {
              this.autoPlay = true
            }, 3000);
          }else{

          }
        })
      },
    selectBtn(type){
      this.select = type
      this.content = this.select==1?this.info.content:this.info2.content

    },
    showPop(item) {
        this.visible = true
        this.selectPopInfo = item
      },
  },
}
</script>
<style lang="less" scoped>
.dpImdex {
  background: url('../../assets/img/homeBg.jpg') center no-repeat;
  background-size: cover;
  overflow: hidden;
  // width: 1920px;
  // height: 1080px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  overflow-y: auto;
  .wcenter{
    height: 100%;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    // width: 80%;
    // padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap:10px;
  }
  .btnBox{
    display: flex;
    justify-content: center;
    gap:20px;
    .btn{
      padding:10px 20px;
      border-radius: 27px;
      border:1px solid rgba(45, 140, 240, 1);
      color: #ffffff;
      font-size: 24px;
      cursor: pointer;
    }
    .selectBtn{
      background: rgba(45, 140, 240, 1);
    }
  }
  .centerBox {
    border: 2px solid rgba(112, 225, 218, 1);
    background: rgb(31,27,130);
    flex:1;
    overflow: hidden;
    overflow-y:auto ;
    padding:10px;
  }
  .amate{
    div{
      animation: scrollBox 120s linear infinite;
      animation-delay:3s;
    } 
  }
  .title{
    font-size: 54px;
    color: #fff;
    font-weight: 500;
    text-align: center;
    margin-top:10px;
  }
}
.flexBtn{
  display: flex;
  gap:20px;
  width: 80%;
  height: 80%;
  margin:20px auto;
  .item{
    flex:1;
  }


  .tablelist{
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  .d-cell{
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    position: relative;
    line-height: 40px;
    padding-left:20px;
    width: 100%;
    cursor: pointer;
    .rightIcon{
      height: 40px;
      width: 100px;
      vertical-align: middle;
      margin:0 0 0 10px;
      text-indent: 0;
    }
    .leftContent{
      flex:1;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      text-indent: 0;
      font-size: 20px;
      span{
        margin-left:20px;
      }
    }
    &::before{
      width: 11px;
      height: 11px;
      content:'';
      background: url('../../assets/img/tuoyuan.png');
      position: absolute;
      left:0px;
      top:50%;
      transform: translateY(-50%);
    }
  }
}
}
@keyframes scrollBox {
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(calc(-100% + 700px));
  }
}
</style>
<style lang="less">
.mypdfwrap  .ant-modal-content{
    padding:40px;
    width: 933px;
    height: 1021px;
    background:transparent url('../../assets/pdfbg copy.png') no-repeat;
    overflow: auto;
    box-size:border-box;
}
.mypdfwrap .ant-modal-header{
  background: transparent;

}
</style>
